<template>
    <div>
        <!-- 业务进件-非自然人(融资)-业务信息:zrrFrzYwxx-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox nonaturalBusiness">
            <div class="formArrow d_f a_i_c">
                <img src="../../assets/formArrow.png" alt="">
                <span>基本信息</span>
            </div>
            <myform :fields="typeFields" @handleSelect="handleSelect" :rules="rules" :options="options"
                :model="model.frzServiceData" class="m_t_16">
            </myform>
            <div class="nonaturalBusiness_form" v-if="model.frzServiceData.customerType == '1'">
                <myform :fields="fields" @handleSelect="handleSelect" ref="form1" :rules="rules"
                    :model="model.frzServiceData" @handleInput="handleSelect" :options="options" class="m_t_16">
                    <template v-slot:baseDataAddress>
                        <el-cascader :disabled="isAudit" v-model="model.frzServiceData.baseDataAddress"
                            placeholder="请选择省市区" :options="districts" :props="areaProps" />
                    </template>
                    <template v-slot:agencyId>
                        <el-cascader :disabled="isAudit" v-model="model.frzServiceData.agencyList"
                            @change="handleCascader" placeholder="请选择经办机构" :options="options.agencyId"
                            :props="areaProps1" />
                    </template>
                </myform>
            </div>
            <div v-else>
                <myform :fields="fields2" ref="form2" :rules="rules1" @handleInput="handleSelect"
                    :model="model.frzServiceData" :options="options" class="m_t_16">
                    <template v-slot:agencyId>
                        <el-cascader :disabled="isAudit" v-model="model.frzServiceData.agencyList"
                            @change="handleCascader" placeholder="请选择经办机构" :options="options.agencyId"
                            :props="areaProps1" />
                    </template>
                </myform>
            </div>
            <div class="segment" v-if="fields1.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields1.length > 0">
                <myform :fields="fields1" :model="model.frzServiceData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref, watch } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { formGet, unitFormSet, cooperativeAgencyListAll } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { zrrFrzYwxxType } from './data'
import { PHONE_REG, END_NUM, NUMBRT_REG, CARD, INTEGER } from '../../utils/regular'
const model = {
    frzServiceData: {
        baseDataName: '',//姓名
        baseDataIdCard: '',//身份证号
        baseDataMobile: '',//联系方式
        baseDataMaritalStatus: '0',//婚姻状况 0-未婚，1-已婚，2-离异，3-丧偶
        baseDataMateName: '',//配偶姓名
        baseDataMateIdCard: '',//配偶身份证号
        baseDataMateMobile: '',//配偶联系方式
        baseDataAddress: null,//家庭地址
        baseDataDetailAddress: '',
        guaMoney: '',//申请金额
        guaranteeRate: '',//担保费率
        receivablePremium: '',//应收保费
        agencyName: '',//经办机构
        agencyList: [],
        agencyId: '',
        agencyBranchId: '',
        agencyBranchName: '',
        period: '',//期限
        name: '',//企业名称
        usci: '',//统一社会信用代码
        registeredCapital: '',//注册资本
        legalPerson: '',//法人代表
        legalIdCard: '',//法人代表身份证号
        legalMobile: '',//联系电话
        registerAddress: '',//注册地址
        applyBank: "",
        customerType: 1,
        isReview: 1
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        productId: {
            type: [String, Number],
            default: '',
        },
        vars: {
            type: Object,
            default: {}
        },
        customerType: {
            type: String,
            default: '1'
        },
        isAudit: {
            type: Boolean,
            default: true
        },
        isIncoming:{
            type: Boolean,
            default: true 
        }
    },
    components: {
        CloseBold
    },
    setup(props: any, { emit }: any) {
        const data:zrrFrzYwxxType = reactive({
            name: '业务信息',
            districts: [],
            status: true,
            model: copy(model),
            id: '',
            typeFields: [
                {
                    label: "客户类型",
                    prop: 'customerType',
                    type: 'radio',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            fields: [
                {
                    label: "姓名",
                    prop: 'baseDataName',
                    placeholder: '请输入姓名',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "身份证号",
                    prop: 'baseDataIdCard',
                    placeholder: '请输入身份证号',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "联系方式",
                    prop: 'baseDataMobile',
                    placeholder: '请输入联系方式',
                    type: 'number',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "婚姻状况",
                    prop: 'baseDataMaritalStatus',
                    type: 'radio',
                    disabled: false,
                },
                {
                    label: "配偶姓名",
                    prop: 'baseDataMateName',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                    show:true,
                },
                {
                    label: "配偶身份证号",
                    prop: 'baseDataMateIdCard',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                    show:true,
                },
                {
                    label: "配偶联系电话",
                    prop: 'baseDataMateMobile',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                    show:true,
                },
                {
                    label: "",
                    prop: '',
                    labelWidth: '130px',
                    disabled: false,
                    show:true,
                },
                {
                    label: "家庭地址",
                    prop: 'baseDataAddress',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: " ",
                    prop: 'baseDataDetailAddress',
                    placeholder: '请填入详细住址',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "申请金额",
                    prop: 'guaMoney',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "担保费率",
                    prop: 'guaranteeRate',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '%',
                    disabled: false,
                },
                {
                    label: "应收保费",
                    prop: 'receivablePremium',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "期限",
                    prop: 'period',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '个月',
                    disabled: false,
                },

                {
                    label: "经办机构",
                    prop: 'agencyId',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            options: {
                customerType: [
                    {
                        label: '自然人',
                        value: 1
                    },
                    {
                        label: '法人',
                        value: 2
                    },
                ],
                baseDataMaritalStatus: [
                {
                        label: '未婚',
                        value: '0',
                    },
                    {
                        label: '已婚',
                        value: '1',
                    },
                    {
                        label: '离异',
                        value: '2',
                    },
                    {
                        label: '丧偶',
                        value: '3',
                    },
                ],
                agencyName: [],
                agencyId: [],

            },
            areaProps: {
                multiple: false,
                value: 'name',
                label: 'name',
                children: 'districts'
            },
            areaProps1: {
                multiple: false,
                value: 'id',
                label: 'name',
                children: 'bankIds',
                checkStrictly: true,
            },
            rules: {
                baseDataName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                baseDataIdCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                baseDataMobile: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系方式格式不正确' }
                ],
                baseDataMaritalStatus: [
                    { required: true, message: '请选择婚姻状况', trigger: 'blur' },
                ],
                baseDataMateName: [
                    { required: true, message: '请输入配偶姓名', trigger: 'blur' },
                ],
                baseDataMateIdCard: [
                    { required: true, message: '请输入配偶身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                baseDataMateMobile: [
                    { required: true, message: '请输入配偶联系方式', trigger: 'blur' },
                ],
                // baseDataAddress: [
                //     { required: true, message: '请选择家庭地址', trigger: 'change' },
                // ],
                // baseDataDetailAddress: [
                //     { required: true, message: '请输入详细地址', trigger: 'blur' },
                // ],
                guaMoney: [
                    { required: true, message: '请输入申请金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '申请金额格式不正确' }
                ],
                period: [
                    { required: true, message: '请输入期限', trigger: 'blur' },
                    { pattern: INTEGER, message: '期限格式不正确' }
                ],
                guaranteeRate: [
                    { required: true, message: '请输入担保费率', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '担保费率格式不正确' }
                ],
                receivablePremium: [
                    { required: true, message: '请输入应收保费', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '应收保费格式不正确' }
                ],
                agencyId: [
                    { required: true, message: '请选择经办机构', trigger: 'change' },
                ],
            },
            rules1: {
                name: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                ],
                usci: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                    { pattern: END_NUM, message: '统一社会信用代码格式不正确' }
                ],
                registeredCapital: [
                    { required: true, message: '请输入注册资本', trigger: 'blur' },
                ],
                legalPerson: [
                    { required: true, message: '请输入法人代表', trigger: 'blur' },
                ],
                agencyId: [
                    { required: true, message: '请输入经办机构', trigger: 'blur' },
                ],
                legalIdCard: [
                    { required: true, message: '请输入法人代表身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                legalMobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                registerAddress: [
                    { required: true, message: '请输入注册地址', trigger: 'blur' },
                ],
                guaMoney: [
                    { required: true, message: '请输入申请金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '申请金额格式不正确' }
                ],
                guaranteeRate: [
                    { required: true, message: '请输入担保费率', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '担保费率格式不正确' }
                ],
                receivablePremium: [
                    { required: true, message: '请输入应收保费', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '应收保费格式不正确' }
                ],
                applyBank: [
                    { required: true, message: '请输入申请银行', trigger: 'blur' },
                ],
                period: [
                    { required: true, message: '请输入期限', trigger: 'blur' },
                    { pattern: INTEGER, message: '期限格式不正确' }
                ],
            },
            subTitle: '',
            fields1: [],
            fields2: [
                {
                    label: "企业名称",
                    prop: 'name',
                    placeholder: '请输入企业名称',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "统一社会信用代码",
                    prop: 'usci',
                    placeholder: '请输入统一社会信用代码',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "注册资本",
                    prop: 'registeredCapital',
                    placeholder: '请输入注册资本',
                    type: 'input',
                    labelWidth: '150px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "法人代表",
                    prop: 'legalPerson',
                    placeholder: '请输入法人代表',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "经办机构",
                    prop: 'agencyId',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "法人代表身份证号",
                    prop: 'legalIdCard',
                    placeholder: '请输入法人代表身份证号',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "联系电话",
                    prop: 'legalMobile',
                    placeholder: '请输入联系电话',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "注册地址",
                    prop: 'registerAddress',
                    placeholder: '请输入注册地址',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "申请金额",
                    prop: 'guaMoney',
                    placeholder: '请输入申请金额',
                    type: 'input',
                    labelWidth: '150px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "担保费率",
                    prop: 'guaranteeRate',
                    placeholder: '请输入担保费率',
                    type: 'input',
                    labelWidth: '150px',
                    unit: '%',
                    disabled: false,
                },
                {
                    label: "应收保费",
                    prop: 'receivablePremium',
                    placeholder: '请输入应收保费',
                    type: 'input',
                    labelWidth: '150px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "申请银行",
                    prop: 'applyBank',
                    placeholder: '请输入申请银行',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "期限",
                    prop: 'period',
                    placeholder: '请输入期限',
                    type: 'number',
                    labelWidth: '150px',
                    unit: '个月',
                    disabled: false,
                },
            ],
            isReset: 2,
        })
        const router = useRouter()
        const form1 = ref()
        const form2 = ref()
        onBeforeMount(() => {
            data.districts = JSON.parse(<string>localStorage.getItem('districts'))
            methods.getData(true)
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            //获取自定义表单
            async getData(flag: Boolean) {
                cooperativeAgencyListAll({ productId: props.productId }).then((res: any) => {
                    data.options.agencyId = res
                    formGet({ tag: 'zrrFrzYwxx' }).then((res: any) => {
                        data.id = res.id
                        data.name = res.name
                        data.isReset = res.isReset
                        if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                        data.subTitle = res.subTitle
                        let formStruct = JSON.parse(res.formStruct)
                        formStruct.formFields.map((item:any)=>{
                        data.model.frzServiceData[item.prop]=''
                    })
                        data.fields1 = formStruct.formFields
                        data.fields.map((item: any) => {
                            if (item.prop != 'mateName' || item.prop != 'mateMobile' || item.prop != 'mateIdCard') {
                                item.disabled = props.isAudit
                            }

                        })
                        data.fields1.map((item: any) => {
                            item.disabled = props.isAudit
                        })

                        data.fields2.map((item: any) => {
                            item.disabled = props.isAudit
                        })
                        data.typeFields.map((item: any) => {
                            item.disabled = props.isIncoming
                        })
                        if (props.vars) {
                            const localData = copy(props.vars)
                            if (localData.frzServiceData) {
                                console.log(localData.frzServiceData,flag);
                                for (let key in data.model.frzServiceData) {
                                    if(localData.frzServiceData[key]!=null){
                                        data.model.frzServiceData[key] = localData.frzServiceData[key]
                                    }
                                }
                                data.typeFields.map((item: any) => {
                                    item.disabled = flag
                                })
                            }
                            if (data.options.agencyId.some(item => item.id == localData.frzServiceData.agencyId)) {
                                if (localData.frzServiceData.agencyBranchId) {
                                    data.model.frzServiceData.agencyList = [localData.frzServiceData.agencyId, localData.frzServiceData.agencyBranchId]
                                } else {
                                    data.model.frzServiceData.agencyList = [localData.frzServiceData.agencyId]
                                }
                            }


                        } 
                        if(data.model.frzServiceData.baseDataMaritalStatus!=null){
                            data.model.frzServiceData.baseDataMaritalStatus = String(data.model.frzServiceData.baseDataMaritalStatus)
                        }
                        // if(!props.isAudit){
                            methods.handleSelect('baseDataMaritalStatus')
                        // } 
                        if(props.isAudit&&data.model.frzServiceData.baseDataMaritalStatus != '0'){
                            data.rules.baseDataMateName[0].required = data.rules.baseDataMateIdCard[0].required = data.rules.baseDataMateMobile[0].required = false
                    }
                        
                        let arr = formStruct.formFields.filter((item: any) => {
                            return item.type == 'select'
                        })
                        let ids = arr.map((item: any) => {
                            return item.prop
                        })
                        if (ids.length == 0) return
                        listByParentArr({ ids: ids }).then((res: any) => {
                            ids.map((item: any) => {
                                data.options[item] = res[item]
                            })
                        })
                    })
                })

            },
            //根据单选框禁用表单
            handleSelect(prop: string) {
                if (prop == 'baseDataMaritalStatus') {
                    if (data.model.frzServiceData.baseDataMaritalStatus != '1') {
                        data.fields[4].show = data.fields[5].show = data.fields[6].show = data.fields[7].show= true
                        // data.rules.baseDataMateName[0].required = data.rules.baseDataMateIdCard[0].required = data.rules.baseDataMateMobile[0].required = true
                    } else {
                        data.fields[4].show = data.fields[5].show = data.fields[6].show = data.fields[7].show= false
                        // data.rules.baseDataMateName[0].required = data.rules.baseDataMateIdCard[0].required = data.rules.baseDataMateMobile[0].required = false
                        // data.model.frzServiceData.baseDataMateName = data.model.frzServiceData.baseDataMateIdCard = data.model.frzServiceData.baseDataMateMobile = ''
                    }
                } else if (prop == 'customerType') {
                    emit("handleSelect", { prop: 'customerType', value: data.model.frzServiceData.customerType });
                } else if (prop == 'baseDataIdCard') {
                    emit("handleSelect", { prop: 'idCard', value: data.model.frzServiceData.baseDataIdCard });
                } else if (prop == 'usci') {
                    emit("handleSelect", { prop: 'usci', value: data.model.frzServiceData.usci });
                }
            },
            handleCascader() {
                data.model.frzServiceData.agencyId = data.model.frzServiceData.agencyList[0]
                if (data.model.frzServiceData.agencyList.length == 2) {
                    data.model.frzServiceData.agencyBranchId = data.model.frzServiceData.agencyList[1]
                } else {
                    data.model.frzServiceData.agencyBranchName = ''
                    data.model.frzServiceData.agencyBranchId = ''
                }
                data.options.agencyId.map((item: any) => {
                    if (item.id == data.model.frzServiceData.agencyId) {
                        data.model.frzServiceData.agencyName = item.name
                        item.bankIds.map(item1 => {
                            if (data.model.frzServiceData.agencyBranchId == item1.id) {
                                data.model.frzServiceData.agencyBranchName = item1.name
                            }
                        })
                    }
                })
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                let customerType = data.model.frzServiceData.customerType
                data.model = copy(model)
                data.model.frzServiceData.customerType = customerType
                methods.handleSelect('baseDataMaritalStatus')
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    if (data.model.frzServiceData.customerType == '1') {
                        form1.value.verification().then((res) => {
                            resolve(data.model)
                        }).catch(() => {
                            reject(false)
                        })
                    } else {
                        form2.value.verification().then((res) => {
                            resolve(data.model)
                        }).catch(() => {
                            reject(false)
                        })
                    }

                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
            changeCustomerType(customerType: string) {
                data.model.frzServiceData.customerType = Number(customerType)
            },
            changeVars() {
                methods.getData(false)
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1, form2
        }
    }
})
</script>
<style lang='scss'>
.nonaturalBusiness {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 130px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }

    }

    .nonaturalBusiness_form {
        .el-form-item:nth-child(10) {
            .el-form-item__label::before {
                display: none !important;
            }
        }
    }
}
</style>